<template>
	<view class="main">
		<u-navbar :is-back="true" :title="navbar" :background="background" back-icon-color="#000000" title-color="#000"
			title-bold="true"></u-navbar>
		<view class="all">
			<view class="head">
				<view class="name">
					类型名称
				</view>
				<view class="ace">
					排序
				</view>
				<view class="operate">
					操作
				</view>
			</view>
			<view class="content" v-for="(item,index) in info.info" :key="index">
				<view class="cont_name"  v-if="indexs!=index">
					{{item.name}}
				</view>
				<input type="text" v-if="indexs==index" v-model="item.name"  @blur="confirm(item)"/>
				<view class="cont_ace"   v-if="indexs!=index">
					{{item.sort}}
				</view>
				<input type="text" v-if="indexs==index" v-model="item.sort" @blur="confirm(item)"/>
				<view class="cont_operate">
					<view class="change" @click="change(index)">
						编辑
					</view>
					<view class="remove" @click="remove(item.id)">
						删除 
					</view>
				</view>
			</view>
		</view>
		<view class="button" @click="router('../../users/add_newoperate/add_newoperate')">
			添加规格
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				info: '',
				navbar:'',
				indexs:null
			}
		},
		onLoad(data) {
			this.info = JSON.parse(decodeURIComponent(data.info))
			console.log('参数为', this.info);
			this.navbar=`(${this.info.tname})规格明细`
			this.getlist()

		},
		mounted() {

		},
		onShow() {
			console.log(this.info);
			this.getlist()
			this.indexs=null
		},
		methods: {
			confirm(e){
				this.indexs=null
				console.log(e);
				global.$http.request({
					url:'/shopapi/Specs/edit',
					data:{
						token:uni.getStorageSync('token'),
						id:e.id,
						name:e.name,
						sort:e.sort
					}
				}).then(res=>{
					if(res.data.code==200){
						uni.showToast({
							title:res.data.msg,
							icon:'none',
							duration:500
						})
					}
				})
			},
			change(index){
				this.indexs=index
			},
			getlist(){
				global.$http.request({
					url:'/shopapi/Specs/info',
					data:{
						token:uni.getStorageSync('token'),
						id:this.info.tid,
					}
				}).then(res=>{
					if(res.data.code==200){
					this.info.info=res.data.data
					}
				})
			},
		remove(id){
			global.$http.request({
				url:'/shopapi/Specs/remove',
				data:{
					token:uni.getStorageSync('token'),
					id:id,
				}
			}).then(res=>{
				if(res.data.code==200){
					uni.showToast({
						title:res.data.msg,
						icon:'none',
						duration:700
					})
					this.getlist()
				}
			})
		},

			router(path) {
				uni.navigateTo({
					url: path+'?id='+this.info.tid
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		width: 750rpx;

		background-color: #f7f7f7;
		padding-bottom: 98rpx;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.all {

				.head {
					width: 750rpx;
					height: 68rpx;
					background: #4D4D4D;
					display: flex;
					// justify-content: space-between;
					line-height: 68rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;

					.name {
						width: 200rpx;

					}

					.ace {
						width: 200rpx;
					}

					.operate {
						width: 350rpx;
					}
				}

			}

			.content {
				width: 750rpx;
				display: flex;
				align-items: center;
				text-align: center;
				background-color: #fff;
				padding: 15rpx 0;
				border-bottom: 1rpx solid #CCCCCC;

				.cont_name {
					width: 200rpx;
				}

				.cont_ace {
					width: 200rpx;
				}

				.cont_operate {
					width: 200rpx;
					margin: 0 auto;
					display: flex;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;

					.details {
						width: 150rpx;
						height: 80rpx;
						background: #FE4E00;
					}

					.change {
						width: 100rpx;
						height: 80rpx;
						background: #0F82FF;
					}

					.remove {
						width: 100rpx;
						height: 80rpx;
						background: #FF0707;
					}
				}
			}

			.button {
				position: fixed;
				bottom: 0;
				text-align: center;
				line-height: 98rpx;
				width: 750rpx;
				height: 98rpx;
				background: #FE4E00;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
